<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/startindex.css"/>
		<script type="text/javascript" src="js/zepto.js"></script>
		<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
		<script src="js/swiper.animate1.0.2.min.js"></script>
		<script type="text/javascript" src="js/startrem.js"></script>
		<script src="js/startindex.js"></script>
	</head>
	<body>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
	<!------------------第一页-------------------->	    	
		        <div class="swiper-slide one">
		        	<div class="one1 ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><img src="img/start04.gif"/></div>
		        	<p class="one2 ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="1s" swiper-animate-delay="1s">个性化推荐</p>
		        	<p class="one3 ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="1s" swiper-animate-delay="1.5s">嘘...不用说，你想听的我都知道</p>
		        </div>
	<!------------------第二页-------------------->	        
		        <div class="swiper-slide">
		        	<div class="two1 ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><img src="img/statr02.gif"/></div>
		        	<p class="one2 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s">精彩评论</p>
		        	<p class="one3 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="1.5s">和一亿有趣的人一起听歌看评论</p>
		        </div>
	<!------------------第三页-------------------->	        
		        <div class="swiper-slide">
		        	<div class="three1 ani" swiper-animate-effect="flash" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><img src="img/start03.gif"/></div>
		        	<p class="one2 ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s" swiper-animate-delay="1s">千万曲库</p>
		        	<p class="one3 ani" swiper-animate-effect="flipInY" swiper-animate-duration="1s" swiper-animate-delay="1.5s">来自全世界的好音乐，尽在耳边</p>
		        </div>
	<!------------------第四页-------------------->	        
		        <div class="swiper-slide">
		        	<div class="four1 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><img src="img/start01.gif"/></div>
		        	<p class="one2 ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">跑步FM</p>
		        	<p class="one3 ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="1.5s">音乐搭配步点，跑的酣畅淋漓</p>
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    <div id="btnl">登录/注册</div>
		    <div id="btnr">立即体验</div>
		</div>
	</body>
	<script type="text/javascript">
		var mySwiper = new Swiper ('.swiper-container', {
		    
		    // 如果需要分页器
		    pagination: '.swiper-pagination',
		     onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
			    swiperAnimateCache(swiper); //隐藏动画元素 
			    swiperAnimate(swiper); //初始化完成开始动画
			  }, 
			  onSlideChangeEnd: function(swiper){ 
			    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			  } 
        
		 })
	</script>
</html>
